<!DOCTYPE html>
<html>
<head>
  <!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

<link rel="image_src" type="image/jpeg" href="/images/logo.png" />

<!-- Site Properities -->
<meta name="generator" content="DocPad v6.79.4" />
<title>Tab | Semantic UI</title>

<meta name="description" content="A tab is a hidden section of content activated by a menu" />
<meta name="keywords" content="html5, ui, library, framework, javascript" />
  
  <script src="/javascript/library/detect.min.js"></script>
  <script src="/javascript/library/jquery.min.js"></script>
  <script src="/javascript/library/clipboard.min.js"></script>
  <script src="/javascript/library/cookie.min.js"></script>
  <script src="/javascript/library/easing.min.js"></script>
  <script src="/javascript/library/highlight.min.js"></script>
  <script src="/javascript/library/history.min.js"></script>
  <script src="/javascript/library/state.js"></script>
  <script src="/javascript/library/tablesort.min.js"></script>
  <script src="/javascript/library/underscore.min.js"></script>





<script src="/dist/semantic.min.js"></script>



<script src="/javascript/docs.js"></script>

  
<link rel="stylesheet" type="text/css" class="ui" href="/dist/semantic.min.css">




<link rel="stylesheet" type="text/css" href="/stylesheets/docs.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/rtl.css">





  
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-44039803-2', 'auto');
  ga('send', 'pageview');
</script>

  
<script type="text/javascript">
  window.liveSettings = {
    api_key    : '9ede3015b9f84c1aabc81ab839c55d74',
    parse_attr : [
      'data-title',
      'data-content'
    ],
    detectlang   : false,
    autocollect  : true,
    ignore_tags  : ['i', 'code', 'pre'],
    parse_attr   : ['data-title', 'data-content', 'data-text'],
    ignore_class : ['code', 'anchor']
  };
</script>
<script type="text/javascript" src="//cdn.transifex.com/live.js"></script>


</head>
<body id="example" class="" ontouchstart="">
  
  <div class="ui vertical inverted sidebar menu" id="toc">
  








<div class="item">
  <a class="ui logo icon image" href="/">
    <img src="/images/logo.png">
  </a>
  <a href="/"><b>UI Docs</b></a>
</div>
<a class="item" href="/introduction/getting-started.html">
  <b>Getting Started</b>
</a>
<a class="item" href="/introduction/new.html">
  <b>New in 2.4</b>
</a>
<div class="item">
  <div class="header">Introduction</div>
  <div class="menu">
    
      <a class="item" href="/introduction/integrations.html">
        Integrations
      </a>
    
      <a class="item" href="/introduction/build-tools.html">
        Build Tools
      </a>
    
      <a class="item" href="/introduction/advanced-usage.html">
        Recipes
      </a>
    
      <a class="item" href="/introduction/glossary.html">
        Glossary
      </a>
    
  </div>
</div>
<div class="item">
  <div class="header">Usage</div>
  <div class="menu">
    
      <a class="item" href="/usage/theming.html">
        Theming
      </a>
    
      <a class="item" href="/usage/layout.html">
        Layouts
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Globals</div>
  <div class="menu">
    
      <a class="item" href="/globals/reset.html">
        Reset
        
      </a>
    
      <a class="item" href="/globals/site.html">
        Site
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Elements</div>
  <div class="menu">
    
      <a class="item" href="/elements/button.html">
        Button
        
      </a>
    
      <a class="item" href="/elements/container.html">
        Container
        
      </a>
    
      <a class="item" href="/elements/divider.html">
        Divider
        
      </a>
    
      <a class="item" href="/elements/flag.html">
        Flag
        
      </a>
    
      <a class="item" href="/elements/header.html">
        Header
        
      </a>
    
      <a class="item" href="/elements/icon.html">
        Icon
        
      </a>
    
      <a class="item" href="/elements/image.html">
        Image
        
      </a>
    
      <a class="item" href="/elements/input.html">
        Input
        
      </a>
    
      <a class="item" href="/elements/label.html">
        Label
        
      </a>
    
      <a class="item" href="/elements/list.html">
        List
        
      </a>
    
      <a class="item" href="/elements/loader.html">
        Loader
        
      </a>
    
      <a class="item" href="/elements/placeholder.html">
        Placeholder
        
      </a>
    
      <a class="item" href="/elements/rail.html">
        Rail
        
      </a>
    
      <a class="item" href="/elements/reveal.html">
        Reveal
        
      </a>
    
      <a class="item" href="/elements/segment.html">
        Segment
        
      </a>
    
      <a class="item" href="/elements/step.html">
        Step
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Collections</div>
  <div class="menu">
    
      <a class="item" href="/collections/breadcrumb.html">
        Breadcrumb
        
      </a>
    
      <a class="item" href="/collections/form.html">
        Form
        
      </a>
    
      <a class="item" href="/collections/grid.html">
        Grid
        
      </a>
    
      <a class="item" href="/collections/menu.html">
        Menu
        
      </a>
    
      <a class="item" href="/collections/message.html">
        Message
        
      </a>
    
      <a class="item" href="/collections/table.html">
        Table
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Views</div>
  <div class="menu">
    
      <a class="item" href="/views/advertisement.html">
        Advertisement
        
      </a>
    
      <a class="item" href="/views/card.html">
        Card
        
      </a>
    
      <a class="item" href="/views/comment.html">
        Comment
        
      </a>
    
      <a class="item" href="/views/feed.html">
        Feed
        
      </a>
    
      <a class="item" href="/views/item.html">
        Item
        
      </a>
    
      <a class="item" href="/views/statistic.html">
        Statistic
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class="active  header">Modules</div>
  <div class="menu">
    
      <a class="item" href="/modules/accordion.html">
        Accordion
        
      </a>
  
      <a class="item" href="/modules/checkbox.html">
        Checkbox
        
      </a>
  
      <a class="item" href="/modules/dimmer.html">
        Dimmer
        
      </a>
  
      <a class="item" href="/modules/dropdown.html">
        Dropdown
        
      </a>
  
      <a class="item" href="/modules/embed.html">
        Embed
        
      </a>
  
      <a class="item" href="/modules/modal.html">
        Modal
        
      </a>
  
      <a class="item" href="/modules/popup.html">
        Popup
        
      </a>
  
      <a class="item" href="/modules/progress.html">
        Progress
        
      </a>
  
      <a class="item" href="/modules/rating.html">
        Rating
        
      </a>
  
      <a class="item" href="/modules/search.html">
        Search
        
      </a>
  
      <a class="item" href="/modules/shape.html">
        Shape
        
      </a>
  
      <a class="item" href="/modules/sidebar.html">
        Sidebar
        
      </a>
  
      <a class="item" href="/modules/sticky.html">
        Sticky
        
      </a>
  
      <a class="active item" href="/modules/tab.html">
        Tab
        
      </a>
  
      <a class="item" href="/modules/transition.html">
        Transition
        
      </a>
  
  </div>
</div>
<div class="item">
  <div class=" header">Behaviors</div>
  <div class="menu">
    
      <a class="item" href="/behaviors/api.html">
        API
        
      </a>
    
      <a class="item" href="/behaviors/form.html">
        Form Validation
        
      </a>
    
      <a class="item" href="/behaviors/visibility.html">
        Visibility
        
      </a>
    
  </div>
</div>

</div>

<div class="ui black big launch right attached fixed button">
  <i class="content icon"></i>
  <span class="text">Menu</span>
</div>
  




<div class="ui fixed inverted main menu">
  <div class="ui container">
    <a class="launch icon item">
      <i class="content icon"></i>
    </a>
    
      <div class="item">
        Tab
      </div>
    
    <div class="right menu">
      
      <div class="vertically fitted borderless item">
        <iframe class="github" src="//ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
      </div>
      
      <!--
      <div class="item">
        <div class="ui hidden right aligned search input" id="search">
          <div class="ui transparent icon input">
            <input class="prompt" type="text" placeholder="Search...">
            <i class="inverted search link icon" data-content="Search UI"></i>
          </div>
          <div class="results"></div>
        </div>
      </div>
      -->
    </div>
  </div>
</div>

  <div class="pusher">
    <div class="full height">
      <div class="toc">
        <div class="ui vertical inverted menu">
          








<div class="item">
  <a class="ui logo icon image" href="/">
    <img src="/images/logo.png">
  </a>
  <a href="/"><b>UI Docs</b></a>
</div>
<a class="item" href="/introduction/getting-started.html">
  <b>Getting Started</b>
</a>
<a class="item" href="/introduction/new.html">
  <b>New in 2.4</b>
</a>
<div class="item">
  <div class="header">Introduction</div>
  <div class="menu">
    
      <a class="item" href="/introduction/integrations.html">
        Integrations
      </a>
    
      <a class="item" href="/introduction/build-tools.html">
        Build Tools
      </a>
    
      <a class="item" href="/introduction/advanced-usage.html">
        Recipes
      </a>
    
      <a class="item" href="/introduction/glossary.html">
        Glossary
      </a>
    
  </div>
</div>
<div class="item">
  <div class="header">Usage</div>
  <div class="menu">
    
      <a class="item" href="/usage/theming.html">
        Theming
      </a>
    
      <a class="item" href="/usage/layout.html">
        Layouts
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Globals</div>
  <div class="menu">
    
      <a class="item" href="/globals/reset.html">
        Reset
        
      </a>
    
      <a class="item" href="/globals/site.html">
        Site
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Elements</div>
  <div class="menu">
    
      <a class="item" href="/elements/button.html">
        Button
        
      </a>
    
      <a class="item" href="/elements/container.html">
        Container
        
      </a>
    
      <a class="item" href="/elements/divider.html">
        Divider
        
      </a>
    
      <a class="item" href="/elements/flag.html">
        Flag
        
      </a>
    
      <a class="item" href="/elements/header.html">
        Header
        
      </a>
    
      <a class="item" href="/elements/icon.html">
        Icon
        
      </a>
    
      <a class="item" href="/elements/image.html">
        Image
        
      </a>
    
      <a class="item" href="/elements/input.html">
        Input
        
      </a>
    
      <a class="item" href="/elements/label.html">
        Label
        
      </a>
    
      <a class="item" href="/elements/list.html">
        List
        
      </a>
    
      <a class="item" href="/elements/loader.html">
        Loader
        
      </a>
    
      <a class="item" href="/elements/placeholder.html">
        Placeholder
        
      </a>
    
      <a class="item" href="/elements/rail.html">
        Rail
        
      </a>
    
      <a class="item" href="/elements/reveal.html">
        Reveal
        
      </a>
    
      <a class="item" href="/elements/segment.html">
        Segment
        
      </a>
    
      <a class="item" href="/elements/step.html">
        Step
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Collections</div>
  <div class="menu">
    
      <a class="item" href="/collections/breadcrumb.html">
        Breadcrumb
        
      </a>
    
      <a class="item" href="/collections/form.html">
        Form
        
      </a>
    
      <a class="item" href="/collections/grid.html">
        Grid
        
      </a>
    
      <a class="item" href="/collections/menu.html">
        Menu
        
      </a>
    
      <a class="item" href="/collections/message.html">
        Message
        
      </a>
    
      <a class="item" href="/collections/table.html">
        Table
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Views</div>
  <div class="menu">
    
      <a class="item" href="/views/advertisement.html">
        Advertisement
        
      </a>
    
      <a class="item" href="/views/card.html">
        Card
        
      </a>
    
      <a class="item" href="/views/comment.html">
        Comment
        
      </a>
    
      <a class="item" href="/views/feed.html">
        Feed
        
      </a>
    
      <a class="item" href="/views/item.html">
        Item
        
      </a>
    
      <a class="item" href="/views/statistic.html">
        Statistic
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class="active  header">Modules</div>
  <div class="menu">
    
      <a class="item" href="/modules/accordion.html">
        Accordion
        
      </a>
  
      <a class="item" href="/modules/checkbox.html">
        Checkbox
        
      </a>
  
      <a class="item" href="/modules/dimmer.html">
        Dimmer
        
      </a>
  
      <a class="item" href="/modules/dropdown.html">
        Dropdown
        
      </a>
  
      <a class="item" href="/modules/embed.html">
        Embed
        
      </a>
  
      <a class="item" href="/modules/modal.html">
        Modal
        
      </a>
  
      <a class="item" href="/modules/popup.html">
        Popup
        
      </a>
  
      <a class="item" href="/modules/progress.html">
        Progress
        
      </a>
  
      <a class="item" href="/modules/rating.html">
        Rating
        
      </a>
  
      <a class="item" href="/modules/search.html">
        Search
        
      </a>
  
      <a class="item" href="/modules/shape.html">
        Shape
        
      </a>
  
      <a class="item" href="/modules/sidebar.html">
        Sidebar
        
      </a>
  
      <a class="item" href="/modules/sticky.html">
        Sticky
        
      </a>
  
      <a class="active item" href="/modules/tab.html">
        Tab
        
      </a>
  
      <a class="item" href="/modules/transition.html">
        Transition
        
      </a>
  
  </div>
</div>
<div class="item">
  <div class=" header">Behaviors</div>
  <div class="menu">
    
      <a class="item" href="/behaviors/api.html">
        API
        
      </a>
    
      <a class="item" href="/behaviors/form.html">
        Form Validation
        
      </a>
    
      <a class="item" href="/behaviors/visibility.html">
        Visibility
        
      </a>
    
  </div>
</div>

        </div>
      </div>
      <div class="article">
        <script src="/javascript/library/sinon.js"></script>
<script src="/javascript/tab.js"></script>



<div class="ui masthead vertical tab segment">
  <div class="ui container">
    <div class="introduction">

      <h1 class="ui header">
        Tab
        
        <div class="sub header">
          
          <a class="twitter-share-button twitter"
            href="http://twitter.com/share"
            data-text="Semantic UI is a next generation UI framework"
            data-url="http://semantic-ui.com"
            data-via="semanticui">
          </a>
          <script type="text/javascript">
          window.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return}js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);return window.twttr||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,"script","twitter-wjs"));
          </script>
          <iframe class="github" src="//ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
          
          A tab is a hidden section of content activated by a menu
        </div>
      </h1>

      <div class="ui hidden divider"></div>

      <div class="ui right floated main menu">
        <a class="bug popup icon item" data-content="Edit This Page" href="https://github.com/Semantic-Org/Semantic-UI-Docs/edit/master/server/documents/modules/tab.html.eco">
          <i class="edit icon"></i>
        </a>
        
        <a class="bug popup icon item" data-content="Submit Bug Report" href="https://github.com/Semantic-Org/Semantic-UI/issues/new?title=[Tab] - Your Bug Name&body=**Steps to Reproduce**%0A1. Do something%0A2. Do something else.%0A3. Do one last thing.%0A%0A**Expected**%0AThe Tab should do this%0A%0A**Result**%0AThe Tab does not do this%0A%0A**Testcase**%0A(fork this to get started)%0Ahttp://jsfiddle.net/rduvhn8u/1/">
          <i class="bug icon"></i>
        </a>
        
        <a class="github popup icon item" data-content="View project on GitHub" href="https://github.com/Semantic-Org/Semantic-UI">
          <i class="alternate github icon"></i>
        </a>
      </div>
      <div class="ui right floated main menu">
        <a class="music popup icon item" data-content="Play Music">
          <i class="music icon"></i>
        </a>
        <div class="ui language dropdown right floating icon item" id="languages" data-content="Select Language">
          <i class="world icon"></i>
          <div class="menu">
            <div class="header">Select Language</div>
            <div class="ui icon search input">
              <i class="search icon"></i>
              <input type="text" placeholder="Search languages...">
            </div>
            <div class="scrolling menu">
  <div class="item" data-percent="100" data-value="en" data-english="English">
    <span class="description">English</span>
    English
  </div>
  <div class="item" data-percent="94" data-value="da" data-english="Danish">
    <span class="description">dansk</span>
    Danish
  </div>
  <div class="item" data-percent="94" data-value="es" data-english="Spanish">
    <span class="description">Español</span>
    Spanish
  </div>
  <div class="item" data-percent="34" data-value="zh" data-english="Chinese">
    <span class="description">简体中文</span>
    Chinese
  </div>
  <div class="item" data-percent="54" data-value="zh_TW" data-english="Chinese (Taiwan)">
    <span class="description">中文 (臺灣)</span>
    Chinese (Taiwan)
  </div>
  <div class="item" data-percent="79" data-value="fa" data-english="Persian">
    <span class="description">پارسی</span>
    Persian
  </div>
  <div class="item" data-percent="41" data-value="fr" data-english="French">
    <span class="description">Français</span>
    French
  </div>
  <div class="item" data-percent="37" data-value="el" data-english="Greek">
    <span class="description">ελληνικά</span>
    Greek
  </div>
  <div class="item" data-percent="37" data-value="ru" data-english="Russian">
    <span class="description">Русский</span>
    Russian
  </div>
  <div class="item" data-percent="36" data-value="de" data-english="German">
    <span class="description">Deutsch</span>
    German
  </div>
  <div class="item" data-percent="23" data-value="it" data-english="Italian">
    <span class="description">Italiano</span>
    Italian
  </div>
  <div class="item" data-percent="21" data-value="nl" data-english="Dutch">
    <span class="description">Nederlands</span>
    Dutch
  </div>
  <div class="item" data-percent="19" data-value="pt_BR" data-english="Portuguese">
    <span class="description">Português(BR)</span>
    Portuguese
  </div>
  <div class="item" data-percent="17" data-value="id" data-english="Indonesian">
    <span class="description">Indonesian</span>
    Indonesian
  </div>
  <div class="item" data-percent="12" data-value="lt" data-english="Lithuanian">
    <span class="description">Lietuvių</span>
    Lithuanian
  </div>
  <div class="item" data-percent="11" data-value="tr" data-english="Turkish">
    <span class="description">Türkçe</span>
    Turkish
  </div>
  <div class="item" data-percent="10" data-value="kr" data-english="Korean">
    <span class="description">한국어</span>
    Korean
  </div>
  <div class="item" data-percent="7"  data-value="ar" data-english="Arabic">
    <span class="description">العربية</span>
    Arabic
  </div>
  <div class="item" data-percent="6"  data-value="hu" data-english="Hungarian">
    <span class="description">Magyar</span>
    Hungarian
  </div>
  <div class="item" data-percent="6"  data-value="vi" data-english="Vietnamese">
    <span class="description">tiếng Việt</span>
    Vietnamese
  </div>
  <div class="item" data-percent="5"  data-value="sv" data-english="Swedish">
    <span class="description">svenska</span>
    Swedish
  </div>
  <div class="item" data-precent="4"  data-value="pl" data-english="Polish">
    <span class="description">polski</span>
    Polish
  </div>
  <div class="item" data-percent="6"  data-value="ja" data-english="Japanese">
    <span class="description">日本語</span>
    Japanese
  </div>
  <div class="item" data-percent="0"  data-value="ro" data-english="Romanian">
    <span class="description">românește</span>
    Romanian
  </div>
</div>

          </div>
        </div>
      </div>

      
<!--       <a href="/module.html" class="ui right floated basic right labeled icon button">
        Learn about Modules
        <i class="help icon" data-title="What are Modules?" data-content="Modules are UI elements that include behaviors as part of their definition. Modules require some knowledge of Javascript to use."></i>
      </a> -->
      
      
      
      <div class="ui download primary button">
        Download
      </div>
      <div class="ui flowing download basic popup">
        <div class="ui divided equal width relaxed center aligned choice grid">
          <div class="framework column">
            <h4 class="ui center aligned header">UI Framework</h4>
            <div class="ui list">
              <div class="item"><i class="green check icon"></i> Themable</div>
              <div class="item"><i class="green check icon"></i> Build Tools</div>
            </div>
            <div class="ui primary fluid button">Choose</div>
          </div>
          <div class="standalone column">
            <h4 class="ui center aligned header">Standalone</h4>
            <div class="ui list">
              <div class="item">Default Theme</div>
              <div class="item">Precompiled</div>
            </div>
            <div class="ui fluid button basic">Choose</div>
          </div>
        </div>
        <div class="ui divided equal height relaxed center aligned framework grid">
          <div class="column">
            <div class="ui header">Semantic UI</div>
            <a class="ui primary button" href="https://github.com/Semantic-Org/Semantic-UI/archive/master.zip">
              Download ZIP
            </a>
            <a class="ui button" href="/introduction/getting-started.html">Getting Started</a>
            <h4 class="ui header">Package Managers</h4>
            <div class="ui form">
              <div class="field">
                <label>NPM</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="npm install semantic-ui">
                </div>
              </div>
              <div class="field">
                <label>Git</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="https://github.com/Semantic-Org/Semantic-UI.git">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="ui divided equal height relaxed center aligned standalone grid">
          <div class="column">
            <div class="ui header">Standalone Tab</div>
            <a class="ui primary button" href="https://github.com/Semantic-Org/UI-Tab/archive/master.zip">
              Download ZIP
            </a>
            <a class="ui button" href="https://github.com/Semantic-Org/UI-Tab/">
              View GitHub
            </a>
            <h4 class="ui header">Package Managers</h4>
            <div class="ui form">
              <div class="field">
                <label>Bower</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="bower install semantic-ui-tab">
                </div>
              </div>
              <div class="field">
                <label>NPM</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="npm install semantic-ui-tab">
                </div>
              </div>
              <div class="field">
                <label>Git</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="https://github.com/Semantic-Org/UI-Tab.git">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
    </div>
    <div class="advertisement">
      
      <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=semanticuicom" id="_carbonads_js"></script>
      
    </div>
    
    
    
    
    
      
        
      
        
      
        
      
        
      
      <div class="ui four item stackable tabs menu">
        
          <a class="active item" data-tab="definition">Definition</a>
          
        
          <a class="item" data-tab="examples">Examples</a>
          
        
          <a class="item" data-tab="usage">Usage</a>
          
        
          <a class="item" data-tab="settings">Settings</a>
          
        
      </div>
    
  </div>
</div>

  <script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
  <div class="bsa-cpc"></div>
  <script>
    (function(){
      if(typeof _bsa !== 'undefined' && _bsa) {
      _bsa.init('default', 'CVAIKK7I', 'placement:semanticuicom', {
        target: '.bsa-cpc',
        align: 'horizontal',
        disable_css: 'true'
      });
        }
    })();
  </script>
  <div class="ui vertical beg transition hidden segment">
    <i class="large red delete link icon"></i>
    <div class="ui red header">
      <i class="disabled warning sign icon"></i>
      <div class="content">
        Want to Support Open Source? Whitelist Your Ad-Blocker.
        <div class="sub header">
          We promise to not show more than one small ad per page. Dont worry, hiding this message will make sure you won't get nagged again.
        </div>
      </div>
    </div>
  </div>



<div class="main ui container">

  <div class="ui active tab" data-tab="definition">

    <h2 class="ui header">
      Type
    </h2>

    <div class="example">
      <h4 class="ui header">
        Tab
      </h4>
      <p>A basic tab</p>
      <div class="ui ignored info message">A tab is hidden by default, and will only become visible when given the class name <code>active</code> or when activated with Javascript. For more information, see the usage section.</div>
      <div class="ui top attached tabular menu">
        <div class="item">Tab</div>
      </div>
      <div class="ui bottom attached tab segment">
        <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
        <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
      </div>
    </div>

    <h2 class="ui header">
      States
    </h2>

    <div class="example">
      <h4 class="ui header">
        Active
      </h4>
      <p>A tab can be activated, and visible on the page</p>
      <div class="ui top attached tabular menu">
        <div class="active item">Tab</div>
      </div>
      <div class="ui bottom attached active tab segment">
        <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
        <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
      </div>
    </div>

    <div class="example">
      <h4 class="ui header">
        Loading
      </h4>
      <p>A tab can display a loading indicator</p>
      <div class="ui top attached tabular menu">
        <div class="active item">Tab</div>
      </div>
      <div class="ui bottom attached loading tab segment">
        <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
        <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
      </div>
    </div>

  </div>

  <div class="ui tab" data-tab="examples">

    <h2 class="ui dividing header">Basic Examples</h2>

    <div class="first example">
      <h4 class="ui header">Basic Tabs</h4>
      <p>Tabs are connecting using paths specified in the <code>data-tab</code> attribute. Tab is then initialized in Javascript on the activating elements.</p>
      <div class="ui ignored info message">
        To have a tab visible on page load, add the class <code>active</code> to both the initializing menu and the tab.
      </div>
      <div class="ui top attached tabular menu">
        <a class="active item" data-tab="first">First</a>
        <a class="item" data-tab="second">Second</a>
        <a class="item" data-tab="third">Third</a>
      </div>
      <div class="ui bottom attached active tab segment" data-tab="first">
        First
      </div>
      <div class="ui bottom attached tab segment" data-tab="second">
        Second
      </div>
      <div class="ui bottom attached tab segment" data-tab="third">
        Third
      </div>
      <div class="code" data-type="javascript">
      $('.menu .item')
        .tab()
      ;
      </div>
    </div>

    <div class="context example">
      <h4 class="ui header">Multiple Tab Groups</h4>
      <p>There are a several of ways to include independent tab groups on the same page, even with history. One of the easiest ways is provide a specific parent context for each tab group.</p>
      <div class="ui ignored info message">
        If you are using tab contexts inside of tabs, you can also specify <code>childrenOnly: true</code> which will only look for tabs as the immediate children of the given context, or <code>context: 'parent'</code> a special keyword which avoids having to create unique selectors for each group.
      </div>
      <div class="code" data-type="javascript">
        $('#context1 .menu .item')
          .tab({
            context: $('#context1')
          })
        ;
        $('#context2 .menu .item')
          .tab({
            // special keyword works same as above
            context: 'parent'
          })
        ;
      </div>
      <div id="context1">
        <div class="ui secondary menu">
          <a class="item" data-tab="first">First</a>
          <a class="item active" data-tab="second">Second</a>
          <a class="item" data-tab="third">Third</a>
        </div>
        <div class="ui tab segment" data-tab="first">
          <div class="ui top attached tabular menu">
            <a class="active item" data-tab="first/a">1A</a>
            <a class="item" data-tab="first/b">1B</a>
            <a class="item" data-tab="first/c">1C</a>
          </div>
          <div class="ui bottom attached active tab segment" data-tab="first/a">1A</div>
          <div class="ui bottom attached tab segment" data-tab="first/b">1B</div>
          <div class="ui bottom attached tab segment" data-tab="first/c">1C</div>
        </div>
        <div class="ui tab segment active" data-tab="second">
          <div class="ui top attached tabular menu">
            <a class="item" data-tab="second/a">2A</a>
            <a class="item" data-tab="second/b">2B</a>
            <a class="item active" data-tab="second/c">2C</a>
          </div>
          <div class="ui bottom attached tab segment" data-tab="second/a">2A</div>
          <div class="ui bottom attached tab segment" data-tab="second/b">2B</div>
          <div class="ui bottom attached tab segment active" data-tab="second/c">2C</div>
        </div>
        <div class="ui tab segment" data-tab="third">
          <div class="ui top attached tabular menu">
            <a class="item" data-tab="third/a">3A</a>
            <a class="item" data-tab="third/b">3B</a>
            <a class="item" data-tab="third/c">3C</a>
          </div>
          <div class="ui bottom attached tab segment" data-tab="third/a">3A</div>
          <div class="ui bottom attached tab segment" data-tab="third/b">3B</div>
          <div class="ui bottom attached tab segment" data-tab="third/c">3C</div>
        </div>
      </div>
      <div class="ui divider"></div>
      <div id="context2">
        <div class="ui secondary menu">
          <a class="item" data-tab="fourth">Fourth</a>
          <a class="item active" data-tab="fifth">Fifth</a>
          <a class="item" data-tab="sixth">Sixth</a>
        </div>
        <div class="ui tab segment" data-tab="fourth">
          4
        </div>
        <div class="ui active tab segment" data-tab="fifth">
          5
        </div>
        <div class="ui tab segment" data-tab="sixth">
          6
        </div>
      </div>
      <div class="existing code" data-type="html">
        <div id="context1">
          <div class="ui secondary menu">
            <a class="item" data-tab="first">First</a>
            <a class="item active" data-tab="second">Second</a>
            <a class="item" data-tab="third">Third</a>
          </div>
          <div class="ui tab segment" data-tab="first">
            <div class="ui top attached tabular menu">
              <a class="active item" data-tab="first/a">1A</a>
              <a class="item" data-tab="first/b">1B</a>
              <a class="item" data-tab="first/c">1C</a>
            </div>
            <div class="ui bottom attached active tab segment" data-tab="first/a">1A</div>
            <div class="ui bottom attached tab segment" data-tab="first/b">1B</div>
            <div class="ui bottom attached tab segment" data-tab="first/c">1C</div>
          </div>
          <div class="ui tab segment active" data-tab="second">
            <div class="ui top attached tabular menu">
              <a class="item" data-tab="second/a">2A</a>
              <a class="item" data-tab="second/b">2B</a>
              <a class="item active" data-tab="second/c">2C</a>
            </div>
            <div class="ui bottom attached tab segment" data-tab="second/a">2A</div>
            <div class="ui bottom attached tab segment" data-tab="second/b">2B</div>
            <div class="ui bottom attached tab segment active" data-tab="second/c">2C</div>
          </div>
          <div class="ui tab segment" data-tab="third">
            <div class="ui top attached tabular menu">
              <a class="item" data-tab="third/a">3A</a>
              <a class="item" data-tab="third/b">3B</a>
              <a class="item" data-tab="third/c">3C</a>
            </div>
            <div class="ui bottom attached tab segment" data-tab="third/a">3A</div>
            <div class="ui bottom attached tab segment" data-tab="third/b">3B</div>
            <div class="ui bottom attached tab segment" data-tab="third/c">3C</div>
          </div>
        </div>
        <div class="ui divider"></div>
        <div id="context2">
          <div class="ui secondary menu">
            <a class="item" data-tab="fourth">Fourth</a>
            <a class="item active" data-tab="fifth">Fifth</a>
            <a class="item" data-tab="sixth">Sixth</a>
          </div>
          <div class="ui tab segment" data-tab="fourth">
            4
          </div>
          <div class="ui active tab segment" data-tab="fifth">
            5
          </div>
          <div class="ui tab segment" data-tab="sixth">
            6
          </div>
        </div>
      </div>
    </div>

    <div class="paths example">

      <h4 class="ui header">Default Paths</h4>
      <p>When you specify a path like <code>first/</code> after opening the tab it will look for the any child paths and open the first. In this example even if the path is <code>first/</code>, the tab corresponding with <code>first/a</code> will automatically also be open because it is the default child tab. This will work recursively for as many additional child tab groups as you include.</p>
      <div class="ui ignored info message">Each of these examples is initialized with a context to prevent contamination with other tab examples on this page. This is not necessary unless using multiple tab systems on a single page.</div>
      <div class="ignored code" data-type="javascript">
      $('.paths.example .menu .item')
        .tab({
          context: '.paths.example'
        })
      ;
      </div>

      <div class="ui pointing secondary menu">
        <a class="active item" data-tab="first">First</a>
        <a class="item" data-tab="second">Second</a>
        <a class="item" data-tab="third">Third</a>
      </div>
      <div class="ui active tab segment" data-tab="first">
        <div class="ui top attached tabular menu">
          <a class="active item" data-tab="first/a">1A</a>
          <a class="item" data-tab="first/b">1B</a>
          <a class="item" data-tab="first/c">1C</a>
        </div>
        <div class="ui bottom attached active tab segment" data-tab="first/a">1A</div>
        <div class="ui bottom attached tab segment" data-tab="first/b">1B</div>
        <div class="ui bottom attached tab segment" data-tab="first/c">1C</div>
      </div>
      <div class="ui tab segment" data-tab="second">
        <div class="ui top attached tabular menu">
          <a class="item" data-tab="second/a">2A</a>
          <a class="item" data-tab="second/b">2B</a>
          <a class="item" data-tab="second/c">2C</a>
        </div>
        <div class="ui bottom attached tab segment" data-tab="second/a">2A</div>
        <div class="ui bottom attached tab segment" data-tab="second/b">2B</div>
        <div class="ui bottom attached tab segment" data-tab="second/c">2C</div>
      </div>
      <div class="ui tab segment" data-tab="third">
        <div class="ui top attached tabular menu">
          <a class="item" data-tab="third/a">3A</a>
          <a class="item" data-tab="third/b">3B</a>
          <a class="item" data-tab="third/c">3C</a>
        </div>
        <div class="ui bottom attached tab segment" data-tab="third/a">3A</div>
        <div class="ui bottom attached tab segment" data-tab="third/b">3B</div>
        <div class="ui bottom attached tab segment" data-tab="third/c">3C</div>
      </div>
    </div>

    <h2 class="ui dividing header">Remote Examples</h2>


    <div class="dynamic no example">
      <h4 class="header">Retreiving Remote Content</h4>
      <p>Using <code>auto: true</code> will load the tab's path from your server with additional headers to specify an in-page request. When <a href="#settings"><code>cache: true</code></a> is set, re-opening a tab will be loaded from cache without a server request.</p>
      <div class="ui ignored warning message">
        API requests for the following example have been faked using <a href="/behaviors/api.html#using-custom-backends">mockResponse</a> API setting to avoid network overhead.
      </div>
      <div class="code">
      $('.dynamic.example .menu .item')
        .tab({
          cache: false,
          // faking API request
          apiSettings: {
            loadingDuration : 300,
            mockResponse    : function(settings) {
              var response = {
                first  : 'AJAX Tab One',
                second : 'AJAX Tab Two',
                third  : 'AJAX Tab Three'
              };
              return response[settings.urlData.tab];
            }
          },
          context : 'parent',
          auto    : true,
          path    : '/'
        })
      ;
      </div>
      <div class="ui pointing secondary menu">
        <a class="active item" data-tab="first">First</a>
        <a class="item" data-tab="second">Second</a>
        <a class="item" data-tab="third">Third</a>
      </div>
      <div class="ui active tab segment" data-tab="first">
        <h3 class="ui header">AJAX Tab One</h3>
        <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
        <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
        <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
      </div>
      <div class="ui tab segment" data-tab="second">
      </div>
      <div class="ui tab segment" data-tab="third">
      </div>
    </div>

    <div class="eval no example">
      <h4 class="header">Evaluating Scripts in HTML</h4>
      <p>By default, <code>script</code> tags included in HTML will only be evaluated on first load. To change this behavior you can adjust the  <code>evaluateScripts</code> setting.</p>
      <div class="code">
      $('.eval.example .menu .item')
        .tab({
          evaluateScripts : 'once',
          context         : 'parent',
          auto            : true,
          path            : '/'
        })
      ;
      </div>
      <div class="ui pointing secondary menu">
        <a class="active item" data-tab="first">First</a>
        <a class="item" data-tab="second">Second</a>
        <a class="item" data-tab="third">Third</a>
      </div>
      <div class="ui active tab segment" data-tab="first">
        <h3 class="ui header">AJAX Tab One</h3>
        <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
        <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
        <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
      </div>
      <div class="ui tab segment" data-tab="second">
      </div>
      <div class="ui tab segment" data-tab="third">
      </div>
    </div>


    <h2 class="ui dividing header">History Examples</h2>

    <div class="history example">
      <h4>Using Hash History</h4>
      <p>For static sites, or sites that only require simple history, in-page links can be used to trigger different local tab states</p>
      <div class="code" data-type="javascript">
        $('.history.example .menu .item')
          .tab({
            context : '.history.example',
            history : true
          })
        ;
      </div>

      <div class="ui pointing secondary menu">
        <a class="active item" data-tab="first">First</a>
        <a class="item" data-tab="second">Second</a>
        <a class="item" data-tab="third">Third</a>
      </div>
      <div class="ui active tab segment" data-tab="first">
        <div class="ui top attached tabular menu">
          <a class="active item" data-tab="first/a">1A</a>
          <a class="item" data-tab="first/b">1B</a>
          <a class="item" data-tab="first/c">1C</a>
        </div>
        <div class="ui bottom attached active tab segment" data-tab="first/a">1A</div>
        <div class="ui bottom attached tab segment" data-tab="first/b">1B</div>
        <div class="ui bottom attached tab segment" data-tab="first/c">1C</div>
      </div>
      <div class="ui tab segment" data-tab="second">
        <div class="ui top attached tabular menu">
          <a class="item" data-tab="second/a">2A</a>
          <a class="item" data-tab="second/b">2B</a>
          <a class="item" data-tab="second/c">2C</a>
        </div>
        <div class="ui bottom attached tab segment" data-tab="second/a">2A</div>
        <div class="ui bottom attached tab segment" data-tab="second/b">2B</div>
        <div class="ui bottom attached tab segment" data-tab="second/c">2C</div>
      </div>
      <div class="ui tab segment" data-tab="third">
        <div class="ui top attached tabular menu">
          <a class="item" data-tab="third/a">3A</a>
          <a class="item" data-tab="third/b">3B</a>
          <a class="item" data-tab="third/c">3C</a>
        </div>
        <div class="ui bottom attached tab segment" data-tab="third/a">3A</div>
        <div class="ui bottom attached tab segment" data-tab="third/b">3B</div>
        <div class="ui bottom attached tab segment" data-tab="third/c">3C</div>
      </div>
    </div>

    <div class="state example">
      <h4>Using HTML5 State</h4>
      <p>For sites that are able to replicate change on the server, tab can automatically map changes in tab navigation to <a href="http://diveintohtml5.info/history.html" target="_blank">html5 state.</a>
      </p>
      <div class="ui ignored warning message">
        Since these docs are statically hosted on GitHub Pages, html5 state tabs are not demonstrable from the docs. You will need to try this example in your own code.
      </div>
      <div class="code" data-type="javascript">
        $('.ui.menu .item')
          .tab({
            history : true,
            historyType : 'state',
            // base url for all other path changes
            path        : '/my/base/url'
          })
        ;
      </div>
    </div>

  </div>


  <div class="ui intro tab" data-tab="usage">

    <h2 class="ui dividing header">Initializing Tabs</h2>

    <div class="no example">
      <h4 class="ui header">...with Menus</h4>
      <p>Tabs are usually used in concert with an element that activates the tab. Tabs are initialized on the activating item instead of the tab.</p>
      <p>Tabs are connected to their activators with a metadata attribute <code>data-tab</code>. This should be added to both the activating element and the tab itself.</p>

      <div class="code" data-type="javascript">
        $('.tabular.menu .item').tab();
      </div>
      <div class="code" data-type="html">
        <div class="ui tabular menu">
          <div class="item" data-tab="tab-name">Tab Name</div>
          <div class="item" data-tab="tab-name2">Tab Name 2</div>
        </div>
        <div class="ui tab" data-tab="tab-name">
          <!-- Tab Content !-->
        </div>
        <div class="ui tab" data-tab="tab-name2">
          <!-- Tab Content !-->
        </div>
      </div>

    </div>

    <div class="no example">
      <h4 class="ui header">...without Menus</h4>
      <p>If there are no menus that activate tab elements on the page, tabs can be initialized globally by using <code>$.tab()</code> and activated programmatically using <code>$.tab('change tab', path);</code></p>

      <div class="code" data-type="javascript">
        $('.ui.button')
          .on('click', function() {
            // programmatically activating tab
            $.tab('change tab', 'tab-name');
          })
        ;
      </div>
      <div class="code" data-type="html">
        <div class="ui button">Activate Tab</div>
        <div class="ui tab" data-tab="tab-name">
          <!-- Tab Content !-->
        </div>
      </div>
    </div>


    <div class="no example">
      <div class="ignored ui info message">
        <h4 class="ui header">Default Tabs</h4>
        <p>After any tab is opened it will look for a default tab to open inside of the current tab. This is the first tab that begins with the same stem url as the parent tab. For example a tab with the path <code>data-tab="home"</code> might open a tab automatically <code>data-tab="/home/inbox"</code>.</p>
        <p>This will happen recursively for every tab open, allowing as many levels of tabs as you like.</p>
      </div>
    </div>


    <h2 class="ui dividing header">Managing State</h2>

    <div class="no example">
      <h4 class="ui header">...with Hash Tags</h4>

      <p>Hash tags use in page links and <code>onhashstatechange</code> to create history events for each tab. This is sometimes easier to use than the more advanced push state, because it does not require you to route those URLs on your server. All in page links will route to the same url.</p>

      <div class="ui warning message">
        <p>Tabs use Asual's <a href="https://github.com/asual/jquery-address">Address library</a> to provide cross-browser push state support. This is a <b>required dependency</b> for tabs with history to work correctly.</p>
      </div>

      <div class="code">
        $('.ui.menu .item')
          .tab({
            history: true,
            historyType: 'hash'
          })
        ;
      </div>
    </div>

    <div class="no example">
      <h4 class="ui header">...with HTML5 State</h4>
      <p>Tabs can can use html5 push state to manage page state without using <code>#/foo</code> links. When a user refreshes a page using push state the server will be queried for the new url. This means you must set up appropriate routes in your backend to match each link.</p>
      <div class="code">
      $('.ui.menu .item')
        .tab({
          history: true,
          historyType: 'state',
          path: '/modules/tab.html'
        })
      ;
      </div>
    </div>

    <div class="no example">
      <h4 class="ui header">Setting Paths</h4>
      <p>Using <code>historyType: state</code> requires specifying a <b>base URL without any internal state</b>. This cannot be set automatically to <code>window.location</code> because all tabs with html5 state will appear as normal page urls, and route accordingly.</p>
      <p>HTML5 state will only work with dynamic site back-ends because it requires each tab path to correctly route on the server to the appropriate content.</p>
      <div class="code">
      $('.ui.menu .item')
        .tab({
          history: true,
          historyType: 'state'
          path: '/modules/tab.html'
        })
      ;
      </div>
    </div>

    <div class="ui warning message">Using an incorrect base path is a common error when using HTML5 state, and can cause unusual behaviors.</div>

    <h2 class="ui dividing header">AJAX Content</h2>

    <div class="no example">
      <h3 class="ui header">...with automatic routing</h3>

      <p>Specifying the setting <code>auto: true</code>, will automatically retrieve content at a remote url matching the url set in the browser.</p>
      <p>So for example the tab <code>inbox</code> will retrieve content from the URL <code>base-url/inbox/</code></p>
      <p>The URL will receive an addition HTTP Header <code>'X-Remote': true</code>. You can use this on your server's back-end to determine whether a request is an AJAX request from a tab, or a full page request.</p>
      <p>Queries with <code>'X-Remote': true</code> should refresh only the tabbed content, while queries without are normal resources and should refresh <b>the entire page contents</b></p>
      <p>This uses a similar technique to <a href="https://github.com/defunkt/jquery-pjax">pJax</a> or Rail's <a href="https://github.com/rails/turbolinks/">turbolinks</a>.</p>
      <div class="ignored ui info message">There are a variety of settings for configuring dynamic content behavior. Visit the tab settings section for more information</div>
      <div class="code" data-type="javascript">
      $('.dynamic.example .menu .item')
        .tab({
          context : '.dynamic.example',
          auto    : true,
          path    : '/modules/tab.html'
        })
      ;
      </div>
    </div>

    <div class="no example">
      <h4 class="ui header">...with an API Behavior</h4>
      <p>Tabs provide an optional coupling with API which allow you to specify a templated API endpoint that a tab can query</p>
      <p>Tabs will automatically pass the url variable <code>{$tab}</code> which can be replaced for RESTful API links.</p>
      <p>To learn more about API behaviors built into semantic check out the API docs</p>
      <a class="ui button" href="/behaviors/api.html">View API Docs <i class="right chevron icon"></i></a>
    </div>

    <h2 class="ui dividing header">Behavior</h2>

    All the following behaviors can be called using the syntax <code>$('.foo').tab('behavior name', argumentOne, argumentTwo)</code>

    <table class="ui definition celled table segment">
      <tr>
        <td>attach events(selector, event)</td>
        <td>Attaches tab action to given selector. Default event if none specified is toggle</td>
      </tr>
      <tr>
        <td>change tab(path)</td>
        <td>Changes tab to path</td>
      </tr>
      <tr>
        <td>set state(path)</td>
        <td>Sets current path to state</td>
      </tr>
      <tr>
        <td>get path</td>
        <td>Returns current path</td>
      </tr>
      <tr>
        <td>is tab</td>
        <td>Returns whether tab exists</td>
      </tr>
      <tr>
        <td>cache read(path)</td>
        <td>Returns cached HTML for path</td>
      </tr>
      <tr>
        <td>cache add(path, html)</td>
        <td>Sets cached HTML for path</td>
      </tr>
      <tr>
        <td>cache remove(path)</td>
        <td>Removes cached HTML for path</td>
      </tr>
    </table>
  </div>


  <div class="ui tab" data-tab="settings">

    <h3 class="ui header">
      Tab Settings
      <div class="sub header">Form settings modify the tab behavior</div>
    </h3>
    <table class="ui celled sortable definition table segment">
      <thead>
        <tr>
          <th>Setting</th>
          <th class="four wide">Default</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>auto</td>
          <td>false</td>
          <td>Whether tab should load remote content as same url as history</td>
        </tr>
        <tr>
          <td>deactivate</td>
          <td>'siblings'</td>
          <td>When set to <code>siblings</code> will only deactivate elements that are DOM siblings with the activated element. When set to <code>all</code> the component will deactivate all other elements initialized at the same time.</td>
        </tr>
        <tr>
          <td>history</td>
          <td>false</td>
          <td>Whether to record history events for tab changes</td>
        </tr>
        <tr>
          <td>ignoreFirstLoad</td>
          <td>false</td>
          <td>Do not load content remotely on first tab load. Useful when open tab is rendered on server.</td>
        </tr>
        <tr>
          <td>evaluateScripts</td>
          <td>once</td>
          <td>Whether inline scripts in tab HTML should be parsed on tab load. Defaults to <code>once</code>, parsing only on first load. Can also be set to <code>true</code> or <code>false</code> to always parse or never parse inline scripts.</td>
        </tr>
        <tr>
          <td>alwaysRefresh</td>
          <td>false</td>
          <td>Tab should reload content every time it is opened</td>
        </tr>
        <tr>
          <td>deactivate <div class="ui horizontal label">2.2</div></td>
          <td>siblings</td>
          <td>Can be set to either <code>siblings</code> or <code>all</code>. Siblings will only de-activate tab activators that are <code>siblings</code> of the clicked element when a tab is selected. <code>All</code> will deactivate all other tab activators initialized at the same time.</td>
        </tr>
        <tr>
          <td>cacheType <div class="ui horizontal label">2.2</div></td>
          <td>response</td>
          <td>Can be set to either <code>response</code>, <code>DOM</code> or <code>html</code>. Using <code>DOM</code> will cache the a clone of the DOM tree, preserving all events as they existed on render. <code>response</code> will cache the original response on load, this way callbacks always receive the same content. Using <code>html</code> will cache the resulting html after all callbacks, making sure any changes to content are preserved.</td>
        </tr>
        <tr>
          <td>cache</td>
          <td>true</td>
          <td>Tab should cache content after loading locally to avoid server trip on second load</td>
        </tr>
        <tr>
          <td>apiSettings</td>
          <td>false</td>
          <td>Settings object for <a href="/behaviors/api.html">$.api</a> call</td>
        </tr>
        <tr>
          <td>historyType</td>
          <td>hash</td>
          <td>Can be set to <b>hash</b> or <b>state</b>. Hash will use an in-page link to create history events. State will use <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history" target="_blank">DOM History</a> and load pages from server on refresh.</td>
        </tr>
        <tr>
          <td>path</td>
          <td>false</td>
          <td>When using historyType <code>state</code> you must specify the base URL for all internal links.</td>
        </tr>
        <tr>
          <td>context</td>
          <td>false</td>
          <td>Tabs are limited to those found inside this context</td>
        </tr>
        <tr>
          <td>childrenOnly</td>
          <td>false</td>
          <td>If enabled limits tabs to children of passed context</td>
        </tr>
        <tr>
          <td>maxDepth</td>
          <td>25</td>
          <td>Maximum amount of nested tabs allowed (avoids recursion)</td>
        </tr>
      </tbody>
    </table>

    <div class="ui horizontal section icon divider"><i class="icon setting"></i></div>
    <h4 class="ui header">Callbacks</h4>
    <p>Callbacks specify a function to occur after a specific behavior.</p>

    <table class="ui celled sortable definition table segment">
      <thead>
        <tr>
          <th class="four wide"></th>
          <th class="four wide">Parameters</th>
          <th>Context</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>onFirstLoad</td>
          <td>tabPath, parameterArray, historyEvent</td>
          <td>Tab</td>
          <td>Callback only the first time a tab is loaded</td>
        </tr>
        <tr>
          <td>onLoad</td>
          <td>tabPath, parameterArray, historyEvent</td>
          <td>Tab</td>
          <td>Callback every time a tab is loaded</td>
        </tr>
        <tr>
          <td>onRequest</td>
          <td>tabPath</td>
          <td>Tab</td>
          <td>Called when a tab begins loading remote content</td>
        </tr>
        <tr>
          <td>onVisible</td>
          <td>tabPath</td>
          <td>Tab</td>
          <td>Called after a tab becomes visible</td>
        </tr>
      </tbody>
    </table>

    <div class="ui horizontal divider"><i class="icon setting"></i></div>

    <h3 class="ui header">
      DOM Settings
      <div class="sub header">DOM settings specify how this module should interface with the DOM</div>
    </h3>
    <table class="ui celled definition table segment">
      <thead>
        <tr>
          <th>Setting</th>
          <th class="six wide">Default</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>namespace</td>
          <td>tab</td>
          <td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
        </tr>
        <tr>
          <td>templates</td>
          <td>
            <div class="code">
            templates    : {
              // returns page title
              determineTitle: function(tabArray) {}
            }
            </div>
          </td>
          <td>Functions used to return content</td>
        </tr>
        <tr>
          <td>selector</td>
          <td>
            <div class="code">
            selector    : {
              tabs : '.ui.tab',
              parent : '.ui:not(.menu)'
            }
            </div>
          </td>
          <td>Selectors used by module</td>
        </tr>
        <tr>
          <td>metadata</td>
          <td>
            <div class="code">
            metadata : {
              tab    : 'tab',
              loaded : 'loaded',
              promise: 'promise'
            }
            </div>
          </td>
          <td>DOM metadata used by module</td>
        </tr>
        <tr>
          <td>className</td>
          <td>
            <div class="code">
            className   : {
              loading : 'loading',
              active  : 'active'
            }
            </div>
          </td>
          <td>Class names used to attach style to state</td>
        </tr>
      </tbody>
    </table>

    <div class="ui horizontal divider"><i class="icon setting"></i></div>

    <h3 class="ui header">
      Debug Settings
      <div class="sub header">Debug settings controls debug output to the console</div>
    </h3>

    <table class="ui celled sortable definition table segment">
      <thead>
        <tr>
          <th>Setting</th>
          <th class="four wide">Default</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>name</td>
          <td>Tab</td>
          <td>Name used in debug logs</td>
        </tr>
        <tr>
          <td>silent</td>
          <td>False</td>
          <td>Silences all console output including error messages, regardless of other debug settings.</td>
        </tr>
        <tr>
          <td>debug</td>
          <td>False</td>
          <td>Provides standard debug output to console</td>
        </tr>
        <tr>
          <td>performance</td>
          <td>True</td>
          <td>Provides standard debug output to console</td>
        </tr>
        <tr>
          <td>verbose</td>
          <td>True</td>
          <td>Provides ancillary debug output to console</td>
        </tr>
        <tr>
          <td>errors</td>
          <td colspan="2">
            <div class="code">
      error: {
        api        : 'You attempted to load content without API module',
        method     : 'The method you called is not defined',
        missingTab : 'Activated tab cannot be found for this context.',
        noContent  : 'The tab you specified is missing a content url.',
        path       : 'History enabled, but no path was specified',
        recursion  : 'Max recursive depth reached',
        state      : 'The state library has not been initialized'
      }
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

</div>
        <div class="ui  vertical footer segment">
  <div class="ui center aligned container">
    <div class="ui stackable grid">
      <div class="three wide column">
        <h4 class="ui header">Community</h4>
        <div class="ui link list">
          <a class="item" href="https://www.transifex.com/organization/semantic-org/" target="_blank">Help Translate</a>
          <a class="item" href="https://github.com/Semantic-Org/Semantic-UI/issues" target="_blank">Submit an Issue</a>
          <a class="item" href="https://gitter.im/Semantic-Org/Semantic-UI" target="_blank">Join our Chat</a>
          <a class="item" href="/cla.html" target="_blank">CLA</a>
        </div>
      </div>
      <div class="three wide column">
        <h4 class="ui header">Network</h4>
        <div class="ui link list">
          <a class="item" href="https://github.com/Semantic-Org/Semantic-UI" target="_blank">GitHub Repo</a>
          <a class="item" href="http://forums.semantic-ui.com" target="_blank">User Forums</a>
          <a class="item" href="http://1.semantic-ui.com">1.x Docs</a>
          <a class="item" href="http://legacy.semantic-ui.com">0.x Docs</a>
        </div>
      </div>
      <div class="seven wide right floated column">
        <h4 class="ui header">Help Preserve This Project</h4>
        <p> Support for the continued development of Semantic UI comes directly from the community.</p>
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
          <input type="hidden" name="cmd" value="_s-xclick">
          <input type="hidden" name="hosted_button_id" value="7ZAF2Q8DBZAQL">
          <button type="submit" class="ui large teal button">Donate Today</button>
        </form>
      </div>
    </div>
    <div class="ui section divider"></div>
    <img src="/images/logo.png" class="ui centered mini image">
    <div class="ui horizontal small divided link list">
      <a class="item" href="http://semantic-ui.mit-license.org/" target="_blank">Free & Open Source (MIT)</a>
    </div>
  </div>
</div>

      </div>
    </div>
  </div>
  <div class="ui basic language modal">
  <i class="close icon"></i>
  <div class="header">The <span class="name"></span> Translation Needs Your Help</div>
  <div class="image content">
    <div class="middle aligned image">
      <i class="world icon"></i>
    </div>
    <div class="description">
      <p>This translation is only <b><span class="complete"></span>%</b> complete!</p>
      <div class="ui inverted indicating progress">
        <div class="bar"></div>
      </div>
      <p>We need your help to make Semantic available to  people who speak your language.</p>
      <p>Our translation tools are easy to use and allow you to translate text without having to leave the site.
      </p>
    </div>
  </div>
  <div class="actions">
    <div class="ui inverted cancel button">No Thanks</div>
    <a href="https://github.com/Semantic-Org/Semantic-UI/wiki/Translating-Semantic-UI-Docs" target="_blank" class="ui inverted approve teal button">
      <i class="mail icon"></i>
      Help Translate
    </a>
  </div>
</div>

<div class="ui basic chinese modal">
  <i class="close icon"></i>
  <div class="header">Would you like to visit the mirror site?</div>
  <div class="image content">
    <div class="middle aligned image">
      <i class="question icon"></i>
    </div>
    <div class="description">
      <p>Semantic is available at <a href="http://www.semantic-ui.cn">semantic-ui.cn</a> a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.
      </p>
    </div>
  </div>
  <div class="actions">
    <div class="ui inverted red cancel button">No Thanks</div>
    <a href="http://www.semantic-ui.cn" class="ui inverted green approve button">
      <i class="mail icon"></i>
      Yes, take me to the mirror
    </a>
  </div>
</div>
  <div class="ui demo page dimmer">
  <div class="content">
    <div class="center">
      <h2 class="ui inverted icon header">
        <i class="mail icon"></i>
        Dimmer Message
        <div class="sub header">Dimmer sub-header</div>
      </h2>
    </div>
  </div>
</div>
  <script>
window.less = {
  async        : true,
  environment  : 'production',
  fileAsync    : false,
  onReady      : false,
  useFileCache : true
};
</script>

<script src="/javascript/library/less.min.js"></script>


</body>
</html>
